
const templateCode = `<v-crud :table-config="tableConfig" />`

export const CustomTableBtns = {
  template: `
    <el-card header="自定义表格按钮" ref="container">
      ${templateCode}
      <CodeCollapse :codes="[templateCode, scriptCode]" />
    </el-card>
  `,

  data() {
    const tableData = [{
      name: '王小虎',
      id: 1
    }, {
      name: '王小虎',
      id: 2
    }, {
      name: '王小虎',
      id: 3
    }, {
      name: '王小虎',
      id: 4
    }]

    return {
      // 表格配置
      tableConfig: {
        requestApi(query) {
          console.log(query); // 包括页数、条数在内的查询参数
          return new Promise(r => {
            setTimeout(() => {
              r({
                data: tableData,
                count: 3,
                pageSize: 20,
                pages: 1
              })
            }, 800)
          })
        },
        handle: {
          options: { width: 250 },
          items: [
            { name: '自定义按钮1', click: this.handleClick1 },
            { name: '自定义按钮2', click: this.handleClick2 },
          ]
        },
        columns: [
          { label: '姓名', prop: 'name' },
        ]
      },
    }
  },

  computed: {
    templateCode() {
      return `<template>
  ${templateCode}
</template>`
    },
    scriptCode() {
      const { data } = CustomTableBtns
      return `<script>
export default {
  ${data.toString()},
  methods: {
    handleClick1(data, { showLoading, cancelLoading, setData }) {
      showLoading()
      setTimeout(() => {
        cancelLoading()
        setData('name', '王老虎')
      }, 1500)
      console.log(arguments, 'args');
      console.log(data, '自定义按钮1');
    },
    handleClick2(data) {
      console.log(data, '自定义按钮2');
    }
  }
}
</script>`
    }
  },

  methods: {
    handleClick1(data, { showLoading, cancelLoading, setData }) {
      showLoading()
      setTimeout(() => {
        cancelLoading()
        setData('name', '王老虎')
      }, 1500)
      console.log(arguments, 'args');
    },
    handleClick2(data) {
      console.log(data, '自定义按钮2');
    }
  }
}